<template>
  <div class="container">
    <!-- 搜索栏 -->
    <el-row :gutter="20" class="mb-4">
      <el-col :span="18">
        <el-input
          v-model="searchKey"
          placeholder="输入仓库名称搜索"
          clearable
          @keyup.enter="handleSearch"
          @clear="handleSearch"
        >
          <template #append>
            <el-button @click="handleSearch">
              <el-icon><search /></el-icon>
            </el-button>
          </template>
        </el-input>
      </el-col>
      <el-col :span="6" class="flex justify-end">
        <el-button type="success" @click="showAddDialog" plain>
          <el-icon><circle-plus /></el-icon>新增仓库
        </el-button>
      </el-col>
    </el-row>

    <!-- 仓库表格 -->
    <el-table :data="filteredData" border stripe highlight-current-row>
      <el-table-column prop="warehouseName" label="仓库名称" min-width="120" />
      <el-table-column prop="time" label="创建时间" min-width="180">
        <template #default="{row}">
          {{ formatTime(row.time) }}
        </template>
      </el-table-column>
      <el-table-column prop="warehouseText" label="仓库描述" min-width="240" />
      <el-table-column label="操作" width="180">
        <template #default="{row}">
          <el-button type="primary" size="small" @click="showEditDialog(row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(row.warehouseName)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑对话框 -->
    <el-dialog 
      v-model="showDialog" 
      :title="dialogTitle" 
      width="500px"
      destroy-on-close
    >
      <el-form :model="formData" label-width="80px">
        <el-form-item label="仓库名称" required>
          <el-input 
            v-model="formData.warehouseName"
            :disabled="isEdit"
            placeholder="请输入仓库名称"
          />
        </el-form-item>
        <el-form-item label="仓库描述">
          <el-input
            v-model="formData.warehouseText"
            type="textarea"
            :rows="4"
            placeholder="请输入仓库描述"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="submitForm">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { 
  getWarehouseList, 
  addWarehouse, 
  updateWarehouse, 
  deleteWarehouse 
} from '@/api/Warehouse'

// 响应式数据
const warehouses = ref([])
const searchKey = ref('')
const showDialog = ref(false)
const isEdit = ref(false)
const formData = ref({
  warehouseName: '',
  time: '',
  warehouseText: ''
})

// 计算属性
const filteredData = computed(() => {
  if(!searchKey.value) return warehouses.value
  return warehouses.value.filter(item => 
    item.warehouseName.includes(searchKey.value)
)
})

// 生命周期
onMounted(async () => {
  await fetchData()
})

// 方法
const fetchData = async () => {
  try {
    const res = await getWarehouseList()
    warehouses.value = res.data.data
  } catch (error) {
    console.error('获取数据失败:', error)
  }
}

const handleSearch = () => {
  // 搜索逻辑已通过计算属性实现
}

const showAddDialog = () => {
  isEdit.value = false
  formData.value = { warehouseName: '', time: '', warehouseText: '' }
  showDialog.value = true
}

const showEditDialog = (item) => {
  isEdit.value = true
  formData.value = { ...item }
  showDialog.value = true
}

const closeDialog = () => {
  showDialog.value = false
}

const submitForm = async () => {
  console.log(formData.value);
  
  try {
    console.log('Sending data:', formData.value);
    if(isEdit.value) {
      await updateWarehouse(formData.value)
    } else {
      await addWarehouse(formData.value)
    }
    await fetchData()
    closeDialog()
  } catch (error) {
    console.error('操作失败:', error)
  }
}

const handleDelete = async (name) => {
  if(confirm(`确定要删除 ${name} 吗？`)) {
    try {
      await deleteWarehouse(name)
      await fetchData()
    } catch (error) {
      console.error('删除失败:', error)
    }
  }
}

const formatTime = (time) => {
  return new Date(time).toLocaleString()
}
</script>
<style scoped>
.container {
  padding: 20px;
}

/* 保持原有功能样式 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 优化表格高度 */
.el-table {
  margin-top: 20px;
}

/* 响应式布局调整 */
@media (max-width: 768px) {
  .el-col {
    margin-top: 10px;
  }
}
</style>